<template>
	<view class="content">
		<scroll-view class="scroll_cont" scroll-y="true">
			<view>
				<image src="../../static/images/logo2.png" mode="aspectFit" class="logo_img"></image>
			</view>
			<view class="btn_content">
				<view class="btn_group clearfix">
					<button class="login_btn" v-if="!isReg" :class="{ active_btn: isActive }" @click="doLogin">登录</button>
					<button class="reg_btn" :class="{ active_btn: !isActive }" @click="doRegister">注册</button>
				</view>
			</view>
			<view class="info_content" v-if="isActive">
				<view class="info_line clearfix">
					<image src="../../static/images/loginIcon/new_icon_name.png" mode="" class="line_icon"></image>
					<input type="text" v-model="logininfo.uUser" placeholder="请输入用户名" class="line_input" />
				</view>
				<view class="info_line clearfix">
					<image src="../../static/images/loginIcon/new_icon_password.png" mode="" class="line_icon"></image>
					<input :type="isShow ? 'password' : 'text'" v-model="logininfo.uPwd" placeholder="请输入密码" class="line_input" />
					<image src="../../static/images/loginIcon/new_close_eyes.png" mode="" class="line_icon_r" :class="{ noShow: !isShow }"
					 @click="isShow = !isShow"></image>
					<image src="../../static/images/loginIcon/open_eyes.png" mode="" class="line_icon_r" :class="{ noShow: isShow }"
					 @click="isShow = !isShow"></image>
				</view>
				<view class="info_negotiate clearfix">
					<view class="switch_content">
						<switch name="switch" class="switch" @change="switchChange" :checked="ischecked" />
						<text class="switch_text">记住密码</text>

					</view>

					<text class="agree_green resettext" @click="reset()">重置密码?</text>
				</view>
				<view class="bottom_btn"><button type="primary" class="reg_btn" :disabled="isLogin" @click="Login()">登录</button></view>
			</view>
			<view class="info_content" v-if="!isActive">
				<view class="info_line clearfix">
					<image src="../../static/images/loginIcon/new_icon_name.png" mode="" class="line_icon"></image>
					<input type="text" value="" placeholder="请输入注册账号" v-model="reginfo.uUser" class="line_input" />
				</view>
				
				<view class="info_line clearfix">
					<image src="../../static/images/loginIcon/new_icon_name.png" mode="" class="line_icon"></image>
					<input type="text" value="" placeholder="请输入姓名" v-model="reginfo.user_name" class="line_input" />
				</view>
				
				<view class="info_line clearfix">
					<image src="../../static/images/loginIcon/new_icon_name.png" mode="" class="line_icon"></image>
					<input type="number" placeholder="请输入手机号" v-model="reginfo.mobile" name="mobile" class="line_telinput" />
					<button type="primary" class="code_btn" @click="getCode" :class="{ disabled: sendBool }">
						{{ codeText }}
						<text v-if="sendBool">{{ codeCue }}</text>
					</button>
				</view>
				<view class="info_line clearfix">
					<image src="../../static/images/loginIcon/safe.png" mode="" class="line_icon"></image>
					<input type="number" placeholder="请输入验证码" v-model="reginfo.code" class="line_input" name="code" />
					<!-- <image src="../../static/images/loginIcon/verify.png" mode="" class="line_verify"></image> -->
				</view>
				<view class="info_line clearfix">
					<image src="../../static/images/loginIcon/new_icon_password.png" mode="" class="line_icon"></image>
					<input :type="isRegPwdShow ? 'password' : 'text'" value="" placeholder="请输入密码" class="line_input" name="uPwd"
					 v-model="reginfo.uPwd" />
					<image src="../../static/images/loginIcon/new_close_eyes.png" mode="" class="line_icon_r" @click="isRegPwdShow = !isRegPwdShow"
					 :class="{ noShow: !isRegPwdShow }"></image>
					<image src="../../static/images/loginIcon/open_eyes.png" mode="" class="line_icon_r" @click="isRegPwdShow = !isRegPwdShow"
					 :class="{ noShow: isRegPwdShow }"></image>
				</view>
				<view class="info_line clearfix">
					<image src="../../static/images/loginIcon/new_icon_password.png" mode="" class="line_icon"></image>
					<input :type="isRegConfirmPwdShow ? 'password' : 'text'" placeholder="请输入安全密码" v-model="reginfo.uZfPwd" name="uZfPwd"
					 class="line_input" />
					<image src="../../static/images/loginIcon/new_close_eyes.png" mode="" class="line_icon_r" @click="isRegConfirmPwdShow = !isRegConfirmPwdShow"
					 :class="{ noShow: !isRegConfirmPwdShow }"></image>
					<image src="../../static/images/loginIcon/open_eyes.png" mode="" class="line_icon_r" @click="isRegConfirmPwdShow = !isRegConfirmPwdShow"
					 :class="{ noShow: isRegConfirmPwdShow }"></image>
				</view>

				<view class="info_line clearfix">
					<image src="../../static/images/loginIcon/new_icon_name.png" mode="" class="line_icon"></image>
					<input type="text" placeholder="请输入推荐用户(没有则为空)" v-model="reginfo.uTuiUserName" class="line_input" />
				</view>

				<view class="info_negotiate clearfix">
					<image src="../../static/images/loginIcon/bt_sele_zhuce.png" mode="" @click="isShowCircl = !isShowCircl" class="line_icon"
					 :class="{ noShow: isShowCircl }"></image>
					<image src="../../static/images/loginIcon/bt_unsele_zhuce.png" mode="" @click="isShowCircl = !isShowCircl" class="line_icon"
					 :class="{ noShow: !isShowCircl }"></image>
					<view class="agree_cont">
						<text class="agree">我已阅读并同意注册条款。</text>
						<text  v-if="showAgree" class="agree_green" @click="downloadapp()">下载APP</text>
						
						
					</view>
				</view>
				<view class="bottom_btn"><button type="primary" class="reg_btn" @click="handlRegister">注册</button></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import validate from "@/common/ys-validate.js"


	export default {
		data() {
			return {
				isActive: true,
				isShow: true,
				isReg: false,
				ischecked: false,


				isShowCircl: false,
				isRegPwdShow: true,
				isRegConfirmPwdShow: true,


				codeText: '获取验证码',
				codeCue: '秒后可重发',
				sendBool: false,
				btnCtrl: true,
 showAgree: false,
				reginfo: {},
				logininfo: {},
				isLogin: false
			};
		},

		onLoad: function(e) {

			if (e.username) {
			//	this.reginfo.uTuiUserName = e.username;
				this.isReg = true;
				this.isActive = false
			}
			
			// #ifdef H5
			
			this.showAgree = true
			
			//#endif
		},

		mounted: function(e) {
			var logininfos = uni.getStorageSync('logininfo');

			if (logininfos) {
				this.logininfo = logininfos;
				this.ischecked = true;
			}


			var token = uni.getStorageSync("token");

			if (token) {

				uni.switchTab({
					url: '../index/bussiness',
					success: res => {},
				})
			}


		},



		methods: {
			doLogin() {
				this.isActive = true;
			},

			Login() {
				if (!this.logininfo.uUser || !this.logininfo.uPwd) {
					this.$api.msg('账号密码不能为空');
					return false;
				}


				this.isLogin = true;
				this.$api.http
					.post('auth/get_mobile_token', {
						logininfo: this.logininfo
					})
					.then(res => {
						if (res.status != 200) {
							this.isLogin = false;

							this.$api.msg(res.msg);
							return;
						}


						if (this.ischecked) { //记住密码
							uni.setStorageSync('logininfo', this.logininfo);
						} else {
							uni.removeStorageSync('logininfo');
						}


						let token = res.msg;
						uni.setStorageSync('token', token);
						this.$api.msg('登录成功');
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/bussiness'
							});
						}, 2000);
					});
			},

			jump(e) {
				uni.navigateTo({
					url: '../xieyi/xieyi?type=' + e
				});
			},

			reset(e) {

				uni.navigateTo({
					url: 'reset'
				});
			},


			doRegister() {
				this.isActive = false;
			},
			getCode() {
				if (this.btnCtrl) {
					var mobile = this.reginfo.mobile;

					if (!validate.isPhone(mobile)) {
						this.$api.msg('手机号码为空错误或者');
						return false;
					}

					this.$api.http
						.post('auth/getRegSmsCode', {
							mobile: mobile
						})
						.then(res => {

							if (res.status == 200) {
								
								console.log('smslog',res);
								this.$api.msg(res.msg);
								this.btnCtrl = false;
								this.sendBool = true;
								this.codeText = 60;
								let self = this;

								var fun = setInterval(function() {
									self.codeText = self.codeText - 1;
									if (self.codeText == 0) {
										self.btnCtrl = true;
										self.codeText = '获取验证码';
										self.sendBool = false;
										clearInterval(fun);
									}
								}, 1000);
							} else this.$api.msg(res.Message || res.msg);
						});
				}
			},
			handlRegister() {

				var uUser = this.reginfo.uUser;
				if (!uUser) {
					this.$api.msg('账号不能为空');
					return false;
				}
				
				var user_name = this.reginfo.user_name;
				if (!user_name) {
					this.$api.msg('姓名不能为空');
					return false;
				}

				var mobile = this.reginfo.mobile;
				if (!validate.isPhone(mobile)) {
					this.$api.msg('手机号码输入错误');
					return false;
				}

				var code = this.reginfo.code;
				if (!code) {
					this.$api.msg('验证码输入错误');
					return false;
				}


				var uPwd = this.reginfo.uPwd;
				if (!uPwd) {
					this.$api.msg('密码不能为空');
					return false;
				}

				var uZfPwd = this.reginfo.uZfPwd;
				if (!uZfPwd) {
					this.$api.msg('支付密码不能为空');
					return false;
				}

			////	var uTuiUserName = this.reginfo.uTuiUserName;
				//if (!uTuiUserName) {
				//	this.$api.msg('推荐人不能为空');
			//		return false;
			//	}


				if (this.isShowCircl) {
					this.$api.msg('请同意注册条款');
					return false;
				}

				this.$api.http
					.post('auth/register', {
						uUser: uUser,
						mobile: mobile,
						uPwd: uPwd,
						uZfPwd: uZfPwd,
						//uTuiUserName: uTuiUserName,
						code: code
					})
					.then(res => {

						if (res.status == 200) {
							let token = res.msg;
						
							if (token != '注册成功') {
								
								// #ifdef H5
							//	this.$api.msg('注册成功，请下载app');
							//	return false;
								// #endif
								
								
								
							
								uni.setStorageSync('token', token);
								//console.log(uni.getStorageSync('token'))
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/index/bussiness'
									});
								}, 1000);
								
								return;
							}

							this.$api.msg(res.msg);
						} else this.$api.msg(res.msg);
					});
			},

			switchChange(e) {
				this.ischecked = e.target.value;

			},
			
			downloadapp(){
				location.href = "/app.apk";
			}
		}
	};
</script>

<style lang="scss">
	.clearfix {
		zoom: 1;
		display: block;
	}

	.clearfix:after {
		content: '.';
		visibility: hidden;
		display: block;
		height: 0;
		clear: both;
	}

	.disabled {
		background: gray;
	}

	.noShow {
		display: none;
	}

	.text-blue {
		color: #5390e3;
	}

	.fl {
		float: left;
	}

	.fr {
		float: right;
	}

	.content {
		height: 100vh;

	}

	.scroll_cont {
		padding-top: 20%;
		height: 100vh;
		background: $bg-theme;
		overflow: hidden;
		text-align: center;
		background-size: 100% auto;

		.logo_img {

			//	width: 100%;
			width: 340upx;
			height: 220upx;
		}

		.btn_content {
			width: 100%;
			padding: 0 72upx;

			.btn_group {
				border: 1upx solid hsla(0, 0%, 100%, 0.3);
				border-radius: 38upx;

				.login_btn {
					width: 50%;
					float: left;
					color: hsla(0, 0%, 100%, 0.3);
					font-size: 32upx;
					height: 80upx;
					line-height: 80upx;
					background-color: rgba(0, 0, 0, 0);
				}

				.reg_btn {
					float: right;
					color: hsla(0, 0%, 100%, 0.3);
					font-size: 32upx;
					height: 80upx;
					width: 50%;
					line-height: 80upx;
					background-color: rgba(0, 0, 0, 0);
				}

				.active_btn {
					color: #ffffff;
					border-radius: 38upx;
					background-color: hsla(0, 0%, 100%, 0.3);
					-webkit-tap-highlight-color: transparent;
				}
			}
		}

		.info_content {
			width: 100%;
			padding: 0 72upx;
			margin-top: 32upx;

			.info_line {
				width: 100%;
				height: 84upx;
				margin-bottom: 20upx;
				border-bottom: 1upx solid hsla(0, 0%, 100%, 0.4);
				position: relative;

				.line_icon {
					float: left;
					width: 85upx;
					height: 85upx;
					-webkit-transform: scale(0.4);
					transform: scale(0.4);
				}

				.line_icon_r {
					position: absolute;
					width: 85upx;
					height: 85upx;
					-webkit-transform: scale(0.4);
					transform: scale(0.4);
					top: 0;
					right: 0;
				}

				.code_btn {
					position: absolute;
					font-size: 24upx;
					height: 68upx;
					line-height: 68upx;
					top: 0upx;
					right: 0;
				}

				.line_verify {
					position: absolute;
					width: 256upx;
					height: 100upx;
					-webkit-transform: scale(0.4);
					transform: scale(0.4);
					top: -12upx;
					right: -60upx;
				}

				.line_input {
					float: left;
					display: block;
					border: none;
					outline: none;
					width: 70%;
					height: 85upx;
					line-height: 85upx;
					color: #fff;
					padding-left: 10upx;
					font-size: 30upx;
					background: none;
					text-align: left;
				}


				.line_telinput {
					float: left;
					display: block;
					border: none;
					outline: none;
					width: 50%;
					height: 85upx;
					line-height: 85upx;
					color: #fff;
					padding-left: 10upx;
					font-size: 30upx;
					background: none;
					text-align: left;
				}
			}

			.info_negotiate {
				width: 100%;
				height: 84upx;

				.switch_content {
					float: left;

					.switch {
            transform: scale(0.8);
            margin-left: -10rpx;
          }

					.switch_text {
						color: #fff;
						font-size: 24upx;
						margin-left: 6upx;
					}
				}

				.line_icon {
					float: left;
					width: 70upx;
					height: 70upx;
					-webkit-transform: scale(0.4);
					transform: scale(0.4);
				}

				.agree_cont {
					float: left;
					height: 70upx;
					line-height: 70upx;
					font-size: 24upx;
					color: #fff;

					.agree {}


				}
			}



			.bottom_btn {
				margin-bottom: 80upx;

				.reg_btn {
					background: linear-gradient(90deg, #4e8cff, #2f79ff);
					color: #fff;
					line-height: 86upx;
					font-size: 32upx;
					margin-top: 10upx;
					border-radius: 38upx;
				}
			}

		}
	}

	.agree_green {
		color: #03fffc;
    margin-top: 4rpx;
	}

	.resettext {
		font-size: 28upx;
		float: right;
	}
</style>
